<template>
	<view>
		<view class="cu-custom" :style="[{height:CustomBar + 'px'},{position: !hasPlacer ? 'absolute':'relative'}]">
			<view class="cu-bar" :style="{background:bgColor,height: CustomBar + 'px',paddingTop: StatusBar + 'px'}">
				<view class="bar-wrap">
					<slot />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: 0,
				CustomBar: 0,
				bgColor:'transparent'
			};
		},
		name: 'cu-custom',
		props: {
			// bgColor: {
			// 	type: String,
			// 	default: '#ffffff'
			// },
			//默认设置relative
			hasPlacer: {
				type: Boolean,
				default: true
			}
		},
		computed: {

		},
		created() {
			uni.getSystemInfo({
				success:(e) => {
					// #ifndef MP
					this.StatusBar = e.statusBarHeight;
					if (e.platform == 'android') {
						this.CustomBar = e.statusBarHeight + 50;
					} else {
						this.CustomBar = e.statusBarHeight + 45;
					};
					// #endif

					// #ifdef MP-WEIXIN || MP-QQ
					this.StatusBar = e.statusBarHeight;

					let capsule = wx.getMenuButtonBoundingClientRect();
					if (capsule) {
						this.Custom = capsule;
						// this.capsuleSafe = uni.upx2px(750) - capsule.left + uni.upx2px(750) - capsule.right;
						this.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
					} else {
						this.CustomBar = e.statusBarHeight + 50;
					}
					// #endif	
				}
			})
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			if(scrollTop > this.CustomBar - 10){
				this.bgColor = "#ffffff";
			}else{
				this.bgColor = "transparent";
			}
		},
		methods: {},
	}
</script>

<style scoped>
	.cu-custom {
		display: block;
		position: relative;
	}

	.cu-bar {
		display: flex;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1024;
		transition: background 1s linear;
		/* box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1); */

	}

	.bar-wrap {
		position: relative;
		width: 100%;
	}
</style>
